/**
 * 验证 useCallback
 */

import React, { useCallback, useState } from 'react'
import { Button } from 'antd'

class Child extends React.PureComponent {
  render() {
    console.log('Child Render!')
    return <div>
      child
    </div>
  }
}

// 对于函数组件新老属性比对决定函数组件是否更新：React.memo()
let Child2 = React.memo(function (props) {
  console.log('Child Render')
  return <div>
    child
  </div>
})

let cache
function Demo(props) {
  console.log('RENDER')
  let [x, setX] = useState(0)
  // let handle = () => {
  //   console.log('x', x)
  // }

  let handle = useCallback(() => {
    console.log('x', x)
  }, [])

  // if (cache) {
  //   console.log(handle === cache)
  // } else {
  //   cache = handle
  // }
  return <div>
    <div>x: {x}</div>
    <div><Button onClick={() => setX(x + 1)}>更新</Button></div>
    {/* <Child handle={handle}></Child> */}
    <Child2 handle={handle}></Child2>
  </div>
}

export default Demo